<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JSDoc: Source: packages/draw/src/draw.vue</title>

    <script src="scripts/prettify/prettify.js"> </script>
    <script src="scripts/prettify/lang-css.js"> </script>
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>

<body>

<div id="main">

    <h1 class="page-title">Source: packages/draw/src/draw.vue</h1>

    



    
    <section>
        <article>
            <pre class="prettyprint source linenums"><code>&lt;template>
  &lt;div>&lt;/div>
&lt;/template>

&lt;script>
  /**
   * 画图组件
   * @module xdh-map-draw
   */
  import Collection from 'ol/Collection'
  import {getParent, mapReady} from 'utils/util'
  import {parse} from 'utils/style'
  import {Draw, Modify} from 'ol/interaction.js';
  import CleanMixin from 'utils/mixins/clean'

  /**
   * 参数属性
   * @member props
   * @property {string} type 画图类型，可选值：'Point', 'LineString','LinearRing', 'Polygon', 'MultiPoint', 'MultiLineString','MultiPolygon','GeometryCollection', 'Circle'
   * @property {number} [dragVertexDelay=500] Delay in milliseconds after pointerdown before the current vertex can be dragged to its exact position.
   * @property {number} [snapTolerance=12] Pixel distance for snapping to the drawing finish.
   * @property {boolean} [stopClick]
   * @property {number} [maxPoints]
   * @property {number} [minPoints]
   * @property {object} [styleJson] Style描述JSON
   * @property {boolean} [freehand]
   * @property {boolean} [wrapX]
   */

  const vueProps = {
    type: {
      type: String,
      default: 'LineString'
    },
    validator(val) {
      return ['Point', 'LineString',
        'LinearRing', 'Polygon',
        'MultiPoint', 'MultiLineString',
        'MultiPolygon',
        'GeometryCollection', 'Circle'].includes(val)
    },
    // Delay in milliseconds after pointerdown before the current vertex can be dragged to its exact position.
    dragVertexDelay: {
      type: Number,
      default: 500
    },
    // Pixel distance for snapping to the drawing finish.
    snapTolerance: {
      type: Number,
      default: 12
    },
    // Stop click, singleclick, and doubleclick events from firing during drawing
    stopClick: Boolean,
    // The number of points that can be drawn before a polygon ring or line string is finished.
    // By default there is no restriction.
    maxPoints: Number,
    // The number of points that must be drawn before a polygon ring or line string can be finished.
    // Default is 3 for polygon rings and 2 for line strings.
    minPoints: Number,

    // Style描述JSON
    styleJson: Object,

    freehand: Boolean,
    // Wrap the world horizontally on the sketch overlay.
    wrapX: Boolean

  }


  export default {
    name: 'XdhMapDraw',
    mixins: [CleanMixin],
    props: vueProps,
    data() {
      return {}
    },
    methods: {
      ready(map) {
        this.map = map

      },
      createStyle() {
        return this.styleJson ? parse(this.styleJson) : null
      },
      /**
       * 开始画图
       * @method draw
       */
      draw() {
        if (!this.map || !this.parent) return

        const layer = this.parent.createVectorLayer()
        const source = layer.getSource()

        this.drawer = new Draw({
          source: source,
          style: this.createStyle(),
          ...this.$props
        })
        this.map.addInteraction(this.drawer)
        this.drawer.on('drawstart', this.handleDrawStart);
        this.drawer.on('drawend', this.handleDraw);
      },
      /**
       * 编辑图形模式
       * @method modify
       */
      modify() {
        this.drawer = new Modify({
          features: new Collection(this.features),
          style: this.createStyle(),
          wrapX: this.wrapX
        });
        this.drawer.on('modifystart', this.handleModifyStart);
        this.drawer.on('modifyend', this.handleModify);
        this.map.addInteraction(this.drawer)
      },
      /**
       * 完成画图
       * @method finish
       */
      finish() {
        if (this.drawer) {
          this.drawer.un('drawstart', this.handleDrawStart);
          this.drawer.un('drawend', this.handleDraw);
          this.drawer.un('modifystart', this.handleModifyStart);
          this.drawer.un('modifyend', this.handleModify);
          this.map.removeInteraction(this.drawer)
          this.drawer = null
        }
      },
      handleDrawStart(e) {
        /**
         * 画图开始时触发
         * @event drawstart
         * @param {object} e 事件对象
         */
        this.$emit('drawstart', e)
        e.feature.on('change', this.handleChange)
      },
      handleChange(e) {
        /**
         * 图形发生变化时触发
         * @event change
         * @param {object} e 事件对象
         */
        this.$emit('change', e)
      },
      handleModify(e) {
        /**
         * 修改图形结束时触发
         * @event modifyend
         * @param {object} e 事件对象
         */
        this.$emit('modifyend', e)
      },
      handleModifyStart(e) {
        /**
         * 修改图形开始时触发
         * @event modifystart
         * @param {object} e 事件对象
         */
        this.$emit('modifystart', e)
      },
      handleDraw(e) {
        this.features.push(e.feature)
        /**
         * 画图结束时触发
         * @event drawend
         * @param {object} e 事件对象
         */
        this.$emit('drawend', e)
      },
      /**
       * 清除已画的图形
       * @method clear
       */
      clear() {
        if (this.parent) {
          this.features.forEach((feature, index) => {
            this.remove(feature)
          })
        }
      },
      /**
       * 删除已画的图形
       * @method remove
       * @param {ol/Feature} feature 图形实例
       */
      remove(feature) {
        feature.un('change', this.handleChange)
        this.parent.removeFeature(feature)
        this.features = this.features.filter((f) => { return f !== feature })
      },
      addFeatures(arr) {
        if (arr.length) {
          this.features = this.features.concat(arr)
        }
      }
    },
    created() {
      this.features = []
      this.parent = getParent.call(this)
      mapReady.call(this, this.ready)
    },
    beforeDestroy() {
      if (this.map) {
        this.finish()
        this.clear()
      }
    }
  }
&lt;/script>

</code></pre>
        </article>
    </section>




</div>

<nav>
    <h2><a href="index.html">Home</a></h2><h3>Modules</h3><ul><li><a href="module-xdh-map.html">xdh-map</a></li><li><a href="module-xdh-map-circle.html">xdh-map-circle</a></li><li><a href="module-xdh-map-draw.html">xdh-map-draw</a></li><li><a href="module-xdh-map-echarts.html">xdh-map-echarts</a></li><li><a href="module-xdh-map-heat.html">xdh-map-heat</a></li><li><a href="module-xdh-map-html.html">xdh-map-html</a></li><li><a href="module-xdh-map-icon.html">xdh-map-icon</a></li><li><a href="module-xdh-map-image.html">xdh-map-image</a></li><li><a href="module-xdh-map-line.html">xdh-map-line</a></li><li><a href="module-xdh-map-mask.html">xdh-map-mask</a></li><li><a href="module-xdh-map-measure.html">xdh-map-measure</a></li><li><a href="module-xdh-map-overview.html">xdh-map-overview</a></li><li><a href="module-xdh-map-placement.html">xdh-map-placement</a></li><li><a href="module-xdh-map-pointer.html">xdh-map-pointer</a></li><li><a href="module-xdh-map-polygon.html">xdh-map-polygon</a></li><li><a href="module-xdh-map-popup.html">xdh-map-popup</a></li><li><a href="module-xdh-map-rectangle.html">xdh-map-rectangle</a></li><li><a href="module-xdh-map-scatter.html">xdh-map-scatter</a></li><li><a href="module-xdh-map-text.html">xdh-map-text</a></li><li><a href="module-xdh-map-track.html">xdh-map-track</a></li><li><a href="module-xdh-map-type.html">xdh-map-type</a></li><li><a href="module-xdh-map-zoom.html">xdh-map-zoom</a></li></ul><h3>Classes</h3><ul><li><a href="ol.source.TileSuperMapRest.html">TileSuperMapRest</a></li></ul><h3>Events</h3><ul><li><a href="module-xdh-map-type.html#~event:change">change</a></li><li><a href="module-xdh-map.html#~event:changeType">changeType</a></li><li><a href="module-xdh-map-pointer.html#~event:copy">copy</a></li><li><a href="module-xdh-map-draw.html#~event:drawend">drawend</a></li><li><a href="module-xdh-map-draw.html#~event:drawstart">drawstart</a></li><li><a href="module-xdh-map-draw.html#~event:modifyend">modifyend</a></li><li><a href="module-xdh-map-draw.html#~event:modifystart">modifystart</a></li><li><a href="module-xdh-map-track.html#~event:move">move</a></li><li><a href="module-xdh-map.html#~event:ready">ready</a></li><li><a href="module-xdh-map-track.html#~event:start">start</a></li><li><a href="module-xdh-map-track.html#~event:stop">stop</a></li></ul><h3>Global</h3><ul><li><a href="global.html#capitalize">capitalize</a></li><li><a href="global.html#createLayer">createLayer</a></li><li><a href="global.html#createTdtLayer">createTdtLayer</a></li><li><a href="global.html#D2R">D2R</a></li><li><a href="global.html#featureStyleRender">featureStyleRender</a></li><li><a href="global.html#get">get</a></li><li><a href="global.html#getDistance">getDistance</a></li><li><a href="global.html#getParent">getParent</a></li><li><a href="global.html#keyMap">keyMap</a></li><li><a href="global.html#LAYERS">LAYERS</a></li><li><a href="global.html#mapReady">mapReady</a></li><li><a href="global.html#mix">mix</a></li><li><a href="global.html#mixProps">mixProps</a></li><li><a href="global.html#options">options</a></li><li><a href="global.html#prefix">prefix</a></li><li><a href="global.html#props">props</a></li><li><a href="global.html#set">set</a></li><li><a href="global.html#StyleMap">StyleMap</a></li></ul>
</nav>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Wed Mar 27 2019 22:11:15 GMT+0800 (China Standard Time)
</footer>

<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>
